<template>
  <!-- 【数据传递信息】 关系图 Datatransmission-->
  <div
    style="width: 325px; height: 370px; top: -45px;"
    ref="dataTransmissionDom"
  ></div>
</template>


<script setup lang="ts">
import { ref, onMounted, toRef } from "vue";
import * as echarts from "echarts";

const dataTransmissionDom = ref();

async function initMap() {
  var myChart = echarts.init(dataTransmissionDom.value);

  var data = [
    // 中心
    {
      name: "数据处理中心",
      value: [370, 300], // x和y

      fixed: true,
      symbol:
        "image://",
      symbolSize: [60, 40],
      label: {
        color: "#FFF",
        position: "bottom",
      },
      category: 1,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#157eff",
            },
            {
              offset: 1,
              color: "#35c2ff",
            },
          ]),
        },
      },
    },

    {
      name: "视频平台",
      symbol:
        "image://",
      // 图标大小
      symbolSize: [60, 30],
      value: [70, 530],

      fixed: true,
      category: 1,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#7163F8",
            },
            {
              offset: 1,
              color: "#4063DC",
            },
          ]),
        },
      },
    },

    {
      name: "应用平台",
      value: [60, 280],
      fixed: true,
      symbol:
        "image://",
      symbolSize: [60, 30],
      category: 1,

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#7163F8",
            },
            {
              offset: 1,
              color: "#4063DC",
            },
          ]),
        },
      },
    },

    {
      name: "作业平台",
      value: [80, 0],
      symbol:
        "image://",
      symbolSize: [60, 30],
      fixed: true,
      category: 2,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#ffb402",
            },
            {
              offset: 1,
              color: "#ffdc84",
            },
          ]),
        },
      },
    },

    // 服务器
    {
      name: "本地服务器",
      value: [600, 0],
      symbol:
        "image://",
      symbolSize: [60, 30],

      fixed: true,

      // 显示数据
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#7163F8",
            },
            {
              offset: 1,
              color: "#4063DC",
            },
          ]),
        },
      },
      category: 2,
    },
    // 服务器
    {
      name: "云上服务器",
      value: [600, 560],
      symbol:
        "image://",
      symbolSize: [60, 30],

      fixed: true,

      // 显示数据
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#ffb402",
            },
            {
              offset: 1,
              color: "#ffdc84",
            },
          ]),
        },
      },
      category: 2,
    },
  ];

  var option = {
    // backgroundColor: "#000",
    xAxis: {
      show: false,
      type: "value",
      min: 0, // 设置 x 轴的最小值
      max: 660, // 设置 x 轴的最大值
    },
    yAxis: {
      show: false,
      type: "value",
      min: 0, // 设置 x 轴的最小值
      max: 660, // 设置 x 轴的最大值
    },
    tooltip: {},
    series: [
      {
        type: "graph",
        zlevel: 5,

        draggable: false,
        coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）

        symbol: "rect",
        symbolOffset: ["15%", 0],
        // 标签——文字
        label: {
          normal: {
            color: "#efefef",
            position: "bottom",
            show: true,
            fontSize: 15,
          },
        },
        data: data,
        links: [
          {
            source: "视频平台",
            target: "数据处理中心",
          },
          {
            source: "应用平台",
            target: "数据处理中心",
          },
          {
            source: "作业平台",
            target: "数据处理中心",
          },
          {
            source: "数据处理中心",
            target: "云上服务器",
            lineStyle: {
              normal: {
                color: "#289FBB",
              },
            },
          },
          {
            source: "数据处理中心",
            target: "本地服务器",
          },
        ],

        lineStyle: {
          normal: {
            opacity: 1,
            color: "#4A4799",
            curveness: 0.2,
            width: 2,
          },
        },
      },
      // 流动的属性  ——还有流动位置——从哪里到哪里
      {
        type: "lines",
        coordinateSystem: "cartesian2d",
        z: 1,
        zlevel: 2,
        animation: false,

        effect: {
          show: true,
          period: 8,
          trailLength: 0.01,
          symbolSize: 12,
          symbol: "pin",
          loop: true,
          // color: "rgba(23, 218, 244, 0.5)",
          // period: 2.5,
          // trailLength:0,
          // symbolSize: 12,
          // symbol: "circle",
        },
        lineStyle: {
          normal: {
            color: "#9191F1",
            width: 0,
            curveness: 0.2,
          },
        },

        data: [
          {
            coords: [
              [70, 530],
              [370, 300],
            ],
          },
          {
            coords: [
              [60, 280],
              [370, 300],
            ],
          },
          {
            coords: [
              [80, 0],
              [370, 300],
            ],
          },
          {
            coords: [
              [370, 300],
              [600, 0],
            ],
          },
          {
            coords: [
              [370, 300],
              [600, 560],
            ],
            lineStyle: {
              normal: {
                color: "#2BAFCD",
                width: 0,
                curveness: 0.2,
              },
            },
          },
        ],
      },
    ],
  };

  myChart.setOption(option);
}

onMounted(async () => {
  await initMap();
});
</script>